<template>
  <div>
    <van-nav-bar title="地址列表" left-arrow @click-left="editBackPre" />
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      :address-info="addressInfo"
      @save="onSave"
      @delete="onDelete"
      @change-area="onChangeArea"
    />
  </div>
</template>

<script>
import { AddressEdit, Toast, NavBar } from "vant";
import areaList from "@/data/area";
import { apiSaveShippingAddress } from "@/api/order";
export default {
  name: "AddressEdit",
  components: {
    [AddressEdit.name]: AddressEdit,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      areaList: areaList,
      searchResult: [],
      addressInfo: {}
    };
  },

  methods: {
    onSave(val) {
      console.log(val);
      const params = {
        id: this.addressInfo.id,
        receiverProvince: val.province,
        receiverCity: val.city,
        receiverCounty: val.county,
        receiverAddress: val.addressDetail,
        selected: val.isDefault,
        receiver: val.name,
        receiverMobile: val.tel,
        receiverZip: val.postalCode
      };
      apiSaveShippingAddress(params).then(res => {
        if (res.status === 0) {
          this.$emit("ok");
        }
      });
    },
    create() {},
    onDelete() {
      Toast("delete");
    },
    onEdit(item) {
      console.log(item);
      this.addressInfo = item;
    },
    onChangeArea(val) {
      console.log(val);
    },
    editBackPre() {
      console.log("editBackPre");
      this.$emit("backPre");
    }
  }
};
</script>

<style lang="less">
</style>
